<template>
  <div>
    <van-row>
      <van-col span="24">
        <van-tabs @click="onClick" sticky title-active-color="#E32DAB" color="#E32DAB" :line-width="100" :line-height="2">

          <!--1.为头部标签页-->
          <van-tab v-for="index in categories.length" :title="categories[index-1].name" class="tab">

            <!--2.此处为商品卡片内容页-->
            <van-card v-for="(item,index) in phones"
                      :price="item.price"
                      :desc="item.desc"
                      :title="item.title"
                      :thumb="item.thumb"
            >
              <template #tags>
                <van-tag v-for="tag in item.tag" color="#f2826a" style="margin-left: 5px;">{{tag.name}}</van-tag>
              </template>
              <template #footer>
                <van-button round type="info" size="mini" @click="buy(index)">购买</van-button>
              </template>
            </van-card>
            <!--2.此处为具体的卡片信息（静态展示）
            <van-card
                    num="2"
                    price="2.00"
                    desc="描述信息"
                    title="商品标题"
                    thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
            >
              <template #tags>
                <van-tag plain type="danger">标签</van-tag>
                <van-tag plain type="danger">标签</van-tag>
              </template>
              <template #footer>
                <van-button size="mini">按钮</van-button>
                <van-button size="mini">按钮</van-button>
              </template>
            </van-card>
            -->

          </van-tab>
        </van-tabs>
      </van-col>
    </van-row>

    <!--3.此处为当点击购买按钮时，弹出的内容详情页面-->
    <van-sku
            v-model="show"
            :sku="sku"
            :goods="goods"
            :hide-stock="sku.hide_stock"
            @buy-clicked="onBuyClicked"
    >
      <template #sku-actions="props">
        <div class="van-sku-actions">

          <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
          <van-button
                  square
                  size="large"
                  type="danger"
                  @click="props.skuEventBus.$emit('sku:buy')"
          >
            买买买
          </van-button>
        </div>
      </template>
    </van-sku>

  </div>


</template>

<script>
    import {
        Toast,
        PullRefresh,
        Swipe,
        SwipeItem
    } from 'vant';
    export default {
        comments:{
            [PullRefresh.name]: PullRefresh,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem
        },
        data() {
            return {
                /*此处的数据可以为空。但一经填充后，表示存在静态数据。
                * 在和后台数据对接后，可以省略此处的静态数据*/
                categories: ' ',
                phones: '',
                show: false,
                sku: ' ',
                goods: ''
            }
        },
        created(){    //此处的created()方法用于给vue中的属性进行赋值
            const _this = this
            axios.get('http://localhost:8181/phone/index').then(function (resp) {
                /*注意此处的resp表示响应数据；data表示数据层；data表示data属性；
                * phones为其中的具体属性值*/
                _this.phones = resp.data.data.phones
                _this.categories = resp.data.data.categories
            })
        },
        methods: {
            /*此处的点击事件，是根据传参index确定需要查询的类型typeId,进而查询对应数据*/
            onClick(index) {
                const _this = this
                axios.get('http://localhost:8181/phone/findByCategoryType/'+this.categories[index].type).then(function (resp) {
                    _this.phones = resp.data.data
                })
            },
            buy(index){
                /*点击购买按钮，查询对应的规格信息*/
                this.show = true    //显示对应信息
                const _this = this

                axios.get('http://localhost:8181/phone/findByPhoneId/'+this.phones[index].id).then(function (resp) {
                    _this.goods = resp.data.data.goods
                    _this.sku = resp.data.data.sku
                })
            },
            onBuyClicked(item){
                /*此处是确定购买时，将选定的规格信息和购买数量；并转到地址列表页*/
                this.$store.state.specsId = item.selectedSkuComb.s1
                this.$store.state.quantity = item.selectedNum
                this.$router.push('/addressList')
            }
        }
    }
</script>